<template>
	<!-- 猜你喜欢 begin -->
	<view class="products bg-white">
		<view class="product" v-for="(item, index) in props.list" :key="index" @click="handleSelect(item)">
			<text class="cu-tag light round bg-green">{{ item.tags }}</text>
			<image class="product-image" :src="item.productVos[0].thumbnail" mode="scaleToFill"></image>

			<view class="info">
				<view class="desc">
					<view class="title text-black">{{ item.name }}</view>
					<view class="sub text-muilline">
						{{ item.description }}
					</view>
					<view class="flex align-center">
						<view class="cu-avatar sm round margin-right-sm"
							:style="{backgroundImage:'url('+item.avatarUrl+')'}"></view>
						<view class="text-black text-size-14">{{ item.userName||"未知用户" }}</view>
					</view>
					<view class="sub flex justify-between">
					<view>浏览<text class="margin-left-xs text-menu-color">{{item.readNum}}</text></view>
					<view><text class="margin-right-xs text-orange">{{item.count}}</text>人想要</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 猜你喜欢 end -->
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		list: {
			default: () => {
				return [{
					"id": "30570572791000177",
					"shopId": "0",
					"userId": "0",
					"userName": "",
					"avatarUrl": "",
					"phone": "18716643045",
					"wxNumber": "12342356",
					"qqNumber": "1243656",
					"communityId": "0",
					"housingEstateId": "0",
					"name": "二手交易测试",
					"people": 0,
					"state": 0,
					"startTime": "2024-03-21 00:00:00",
					"endTime": "2024-03-24 00:00:00",
					"sort": 0,
					"enable": true,
					"description": "搬家限时甩卖",
					"videoUrl": "https://www.shuimuqingyuan.cn/img/2024-03-21/bef953e5492b45b28b59b9d5e8ce5cfc.mp4",
					"productVos": [{
						"id": null,
						"shopId": null,
						"relevancyId": null,
						"shopName": null,
						"name": null,
						"keyword": null,
						"productTypeId": null,
						"productTypeName": null,
						"price": null,
						"cost": null,
						"processCost": null,
						"originalPrice": null,
						"thumbnail": null,
						"barCode": null,
						"integral": null,
						"sort": null,
						"stock": null,
						"sales": null,
						"weight": null,
						"specType": null,
						"shelves": false,
						"hot": false,
						"fresh": false,
						"recommend": false,
						"collection": false,
						"createTime": "2024-03-21 08:50:32",
						"recycleBin": false,
						"sellout": false,
						"unit": null,
						"info": null,
						"attrs": [],
						"attrValues": []
					}],
					"readNum": 0,
					"count": 0,
					"tags": ""
				}]
			}
		}
	})
	const handleSelect = (e : any) => {
		emit('action', e)
	}
</script>

<style lang="scss" scoped>
	.products {
		padding: 20rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.product {
			background-color: #ffffff;
			width: 344rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			border-radius: $border-radius-lg;
			margin-bottom: 20rpx;
			box-shadow: 0px 2px 4px 0px rgba(200, 200, 200, 0.5), 0px 2px 4px 0px rgba(200, 200, 200, 0.5);
			border-radius: 8px;

			.cu-tag {
				position: absolute;
				left: 6px;
				top: 8px;
			}

			.product-image {
				width: 100%;
				height: 180px;
				min-height: 180px;
				border-radius: $border-radius-lg $border-radius-lg 0 0;
			}

			.info {
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.desc {
					display: flex;
					flex-direction: column;

					.title {
						font-size: $font-size-lg;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 6rpx;
					}

					.sub {
						font-size: $font-size-sm;
						color: $text-color-assist;
					}
				}

				.extra {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						color: $color-primary;
						font-size: $font-size-lg;
						font-weight: 500 !important;
					}

					.action {
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}

	.text-del {
		text-decoration: line-through;
	}
</style>